<template>
  <UseDarkVue v-slot="{ isDark }">
    <div
      :class="[
        'accordion-menu',
        {
          dark: isDark,
          light: !isDark
        }
      ]"
    >
      <ul class="according-root">
        <Unit
          v-for="(item, index) in menus"
          :key="index"
          :isOpen="item.isOpen"
          :datas="item"
          :isDark="isDark"
        />
      </ul>
    </div>
  </UseDarkVue>
</template>

<script lang="ts">
export default {
  name: 'AccordingMenu'
}
</script>

<script lang="ts" setup>
import UseDarkVue from '@/apps/dark/UseDark.vue'
import Unit from './UnitItem.vue'
import type { AccordingUnit } from './types'

export interface Props {
  menus: AccordingUnit[]
}

const props = withDefaults(defineProps<Props>(), {
  menus: () => [
    {
      title: 'default 1',
      isOpen: true,
      children: [
        { title: 'default 1-1' },
        { title: 'default 1-2' },
        {
          title: 'default 1-3',
          isOpen: false,
          children: [{ title: 'default 1-3-1' }, { title: 'default 1-3-2' }]
        }
      ]
    },
    { title: 'default 2' }
  ],
  grade: 1
})
</script>

<style lang="scss" scoped>
.accordion-menu {
  height: 100%;
  width: 100%;
  overflow: auto;
  padding-left: 6px;

  &.dark {
    background-color: #252526;

    &::-webkit-scrollbar {
      width: 9px;
    }

    &:hover {
      &::-webkit-scrollbar-thumb {
        background-color: #464647;
        transition: 0.3s ease-in-out;
      }

      &::-webkit-scrollbar-track {
        border-radius: 10px;
        background-color: #252526;
      }
    }
  }

  &.light {
    background-color: #f8f8f8;

    &::-webkit-scrollbar {
      width: 9px;
    }

    &:hover {
      &::-webkit-scrollbar-thumb {
        background-color: #dcdee0;
        transition: 0.3s ease-in-out;
      }

      &::-webkit-scrollbar-track {
        border-radius: 10px;
        background-color: #f8f8f8;
      }
    }
  }
}
</style>
